<template>
    <div id="worksource">
        <top-tabbar title="工单来源"/>
        <!--border边框背景-->
        <div class="workcategroy_bg_border_box">
            <img class="workcategroy_bg_border" src="~assets/img/workcategory/workcategroy_bg_border.png" alt="">
        </div>

        <div class="chart_box">
            <div class="chart_box_item1">
                <left-top></left-top>
                <left-btm class="sb_statistics"></left-btm>
            </div>

            <div class="chart_box_item2">
                <gd-center></gd-center>
            </div>

            <div class="chart_box_item1">
                <right-top></right-top>
            </div>
        </div>
    </div>
</template>

<script>
    // all
    import topTabbar from 'components/common/topTabbar/topTabbar'
    import heightChart from 'components/content/heightChart/heightChart'
    import lowChart from 'components/content/lowChart/lowChart'

    //left
    import leftTop from 'views/workSource/leftTop/leftTop'
    import leftBtm from 'views/workSource/leftBtm/leftBtm'

    // center
    import gdCenter from 'views/workSource/gdCenter/gdCenter'

    // right
    import rightTop from 'views/workSource/rightTop/rightTop'

    export default {
        name: "worksource",
        components: {
            topTabbar,
            heightChart,
            lowChart,
            leftTop,
            leftBtm,
            gdCenter,
            rightTop
        }
    }
</script>

<style scoped>
    #worksource {
        width: 100%;
        height: 1080px;
        background: url("../../assets/img/workcategory/workcategory_bg.png");
        background-size: 100%;
        overflow: hidden;
    }

    .workcategroy_bg_border_box {
        position: absolute;
        top: 20px;
        right: 20px;
        left: 20px;
        bottom: 20px;
    }

    .workcategroy_bg_border_box img {
        width: 100%;
        height: 100%;
    }

    .chart_box {
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding: 0 60px;
    }

    .chart_box_item1 {
        padding-top: 20px;
        width: 500px;
        /*height: 100%;*/
        align-items: stretch;
    }

    .chart_box_item2 {
        padding-top: 20px;
        width: 650px;
        /*height: 100%;*/
        align-items: stretch;
    }

    .sb_statistics {
        margin-top: 45px;
    }
</style>
